
	<!-- Page title -->
	<div id="pagetitle">
		<div class="wrapper">
			<h1>Human Resources</h1>
			<form action="" method="get"><input class="" type="text" id="q" name="q" /></form>
		</div>
	</div>
	<!-- End of Page title -->
	
	<!-- Page content -->
	<div id="page">
		<!-- Wrapper -->
		<div class="wrapper">
			<!-- Wrapper Section -->
			<section>
			
				<!-- Tab -->
				<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
				
					<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
						<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
							<a class="corner-tl" href="#time_clock">Time Clock</a>
						</li>
						<li class="ui-state-default ui-corner-top">
							<a class="" href="#payroll_tab">Employee Records</a>
						</li>
						<li class="ui-state-default ui-corner-top">
							<a class="corner-tr" href="#report_tab">Reports</a>
						</li>
					</ul>
					
					<!-- Time Clock -->
					<div id="time_clock" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
						
						<div class="column width8 first">
						
							<div class="width2 first">
								<div class="content-box corners">
									<section style="width:90%; text-align:center">
										<label><?= date('j F Y [ l ]'); ?></label>
									</section>
								</div>
							</div>
						
							<div class="width8 first ta-center">
								<section class="full">
									<label style="color:5092dc; font-size:150px;"><?= date('h:i A'); ?></label>
								</section>
							</div>
							
							<div class="width8 first ta-center">
								<section class="full">
									<label>ID #</label>
									<input type="text"  />
								</section>
							</div>
							
							<div>&nbsp;</div>
							
							<div class="width8 first ta-center">
								<section class="full">
									<a href="#log-in-confirmation" class="nyroModal btn btn-blue bigger" rev="modal">Time In&nbsp;</a>
									<a href="#log-out-confirmation" class="nyroModal btn btn-red bigger">Time Out</a>
								</section>
							</div>
							
							<div id="log-in-confirmation" class="hidden">
								<div class="content-box corners popup-buttons">
									<header>
										<h3><img src="<?= $this->config->item('webroot') ?>/img/information.png" alt="" />Log In</h3>
										<span class="right-buttons">
											<a href="#" class="btn nyroModalClose"><span class="icon icon-cancel">&nbsp;</span>Close</a>
										</span>
									</header>
									<section style="width:96%; text-align:center">
										<p style="font-size:18px">
											Hello <b style="color:5092dc">John dela Cruz</b>!<br  />
											You are successfully logged in.<br  />
											Thank you.
											<br  />&nbsp;
										</p>
									</section>
								</div>
							</div>
							
							<div id="log-out-confirmation" class="hidden">
								<div class="content-box corners popup-buttons">
									<header>
										<h3><img src="<?= $this->config->item('webroot') ?>/img/information.png" alt="" />Log Out</h3>
										<span class="right-buttons">
											<a href="#" class="btn nyroModalClose"><span class="icon icon-cancel">&nbsp;</span>Close</a>
										</span>
									</header>
									<section style="width:96%; text-align:center">
										<p style="font-size:18px">
											Hello <b style="color:5092dc">John dela Cruz</b>!<br  />
											You are successfully logged out.<br  />
											Thank you.
											<br  />&nbsp;
										</p>
									</section>
								</div>
							</div>
							
						</div>
						
					</div>
					<!-- Eno of Time Clock -->
					
					<!-- Payroll Tab -->
					<div id="payroll_tab" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
					
						<div class="column width2 first">
							<div class="colgrouop">
								<!-- Search Entry -->
								<div class="column width2 first">
									<div class="content-box corners">
										<header>
											<h3><img src="<?= $this->config->item('webroot') ?>/img/information.png" alt="" />Search </h3>
										</header>
										<section>
											<label>
												Employee Name / ID # 
											</label>
											<input type="text" class="full title" name="search_keyword" value="12345" />																											
										</section>
									</div>                    
								</div>		
								<!-- End of Search Entry -->
								<!-- Search Entry -->
								<div class="column width2 first">
									<div class="content-box corners">
										<header>
											<h3><img src="<?= $this->config->item('webroot') ?>/img/information.png" alt="" />Employee Records</h3>
										</header>
										<section>
											<ul>
												<li><a id="link-emp-info" href="#201">Employee 201</a></li>
												<li><a id="link-emp-dtr" href="#">Daily Time Record</a></li>
												<li><a id="link-emp-leave" href="#">Leave Application</a></li>	
												<li><a id="link-emp-ot" href="#">Overtime/Undertime Application</a></li>	
												<li><a id="link-emp-contributions" href="#">Contributions (SSS, Pag-ibig, etc)</a></li>
												<li><a id="link-emp-deductions" href="#">Other Deductions</a></li>
												<li><a id="link-emp-payslip" href="#">Payslip</a></li>																							
											</ul>
										</section>
									</div>                    
								</div>		
								<!-- End of Search Entry -->
							</div>
						</div>
						
						<div class="column width6">
							<div class="content-box corners">
								<header>
									<h3><img src="<?= $this->config->item('webroot') ?>/img/information.png" alt="" /><span class="box-title">Employee 201</span></h3>
								</header>
								<section>
								
									<!-- Employee Info -->
									<div class="hideable" id="employee-info">
									
										<div class="column inner-width5 first">
											<table class="no-style-no-border">
												<tbody>
													<tr>
														<td>
															<label>
																ID #
															</label>
														</td>
														<td>
															<input type="text" />
														</td>
													</tr>
													<tr>
														<td>
															<label>
																Name
															</label>
														</td>
														<td>
															<input type="text" />
														</td>
														<td>
															<input type="text" />
														</td>
														<td>
															<input type="text" />
														</td>
													</tr>
													<tr>
														<td>
														</td>
														<td>
															<small>Last</small>
														</td>
														<td>
															<small>First</small>
														</td>
														<td>
															<small>Middle</small>
														</td>
													</tr>
												</tbody>
											</table>
										</div>									
										
										<div class="column inner-width1 ta-center">
											<img src="<?= $this->config->item('webroot') ?>/img/preview-not-available.gif" alt="" /><br />
											<a href="#">[change]</a>
										</div>
										
										<div class="first inner-width6"><hr  /></div>
										
										<div class="first">
											<a id="link-personal-details" href="#personal-details">Personal Details</a>
										</div>
										
										<div id="personal-details" class="first hidden inner-width6">
											<table class="no-style-no-border full">
												<tbody>
													<tr>														
														<td>
															<label>Nickname</label>
														</td>
														<td>
															<input type="text" />
														</td>
														<td>
															<label>Gender</label>
														</td>
														<td>
															<select>
																<option value="male">Male</option>
																<option value="femail">Female</option>
															</select>
														</td>
													</tr>
													<tr>
														<td>
															<label>Civil Status</label>
														</td>
														<td>
															<select>
																<option value="single">Single</option>
																<option value="married">Married</option>
															</select>
														</td>
														<td>
															<label>Blood Type</label>
														</td>
														<td>
															<select>
																<option value="oplus">O+</option>
																<option value="a">A</option>
															</select>
														</td>
													</tr>
													<tr>
														<td>
															<label>Birth Date</label>
														</td>
														<td>
															<input id="datepick" class="hasDatepick" type="date" value="" />
														</td>
														<td>
															<label>Email Address</label>
														</td>
														<td>
															<input type="text"  />
														</td>
													</tr>
													<tr>
														<td>
															<label>City Address</label>
														</td>
														<td>
															<input type="text"  />
														</td>
														<td>
															<label>City Contact #</label>
														</td>
														<td>
															<input type="text"  />
														</td>
													</tr>
													<tr>
														<td>
															<label>Provincial Address</label>
														</td>
														<td>
															<input type="text"  />
														</td>
														<td>
															<label>Provincial Contact #</label>
														</td>
														<td>
															<input type="text"  />
														</td>
													</tr>
													<tr>
														<td>
															<label>Contact Person</label>
														</td>
														<td>
															<input type="text"  />
														</td>
														<td>
															<label>Emergency #</label>
														</td>
														<td>
															<input type="text"  />
														</td>
													</tr>
													<tr>
														<td>
															<label>Spouse Name</label>
														</td>
														<td>
															<input type="text"  />
														</td>
														<td>
															<label>Spouse Occupation</label>
														</td>
														<td>
															<input type="text"  />
														</td>
													</tr>
													<tr>
														<td>
															<label># of Children</label>
														</td>
														<td>
															<input type="text"  />
														</td>
														<td>
															<label># of Dependents</label>
														</td>
														<td>
															<input type="text"  />
														</td>
													</tr>
												</tbody>
											</table>
										</div>
										
										<div class="first inner-width6"><hr  /></div>
										
										<div class="first">
											<a id="link-education" href="#education">Education</a>
										</div>
										
										<div id="education" class="first hidden inner-width6">
											<table class="display stylized full">
												<thead>
													<th>Education</th>
													<th>School</th>
													<th>Degree</th>
													<th>From Year</th>
													<th>To Year</th>
													<th>Remarks</th>
												</thead>
												<tbody>
													<tr>
														<td>Elementary
														</td>
														<td>
														</td>
														<td>
														</td>
														<td>
														</td>
														<td>
														</td>
														<td>
														</td>
													</tr>
													<tr>
														<td>Secondary
														</td>
														<td>
														</td>
														<td>
														</td>
														<td>
														</td>
														<td>
														</td>
														<td>
														</td>
													</tr>
													<tr>
														<td>College
														</td>
														<td>
														</td>
														<td>
														</td>
														<td>
														</td>
														<td>
														</td>
														<td>
														</td>
													</tr>													
												</tbody>
											</table>											
										</div>
										
										<div class="first inner-width6"><hr  /></div>
										
										<div class="first">
											<a id="link-work-experience" href="#work-experience">Work Experience</a>
										</div>
										
										<div id="work-experience" class="first hidden inner-width6">
											<table class="display stylized full">
												<thead>
													<th>Company Name</th>
													<th>Position</th>
													<th>From Date</th>
													<th>To Date</th>
													<th>Reason For Leaving</th>
												</thead>
											</table>
										</div>
										
										<div class="first inner-width6"><hr  /></div>
										
										<div class="first">
											<a id="link-hr-reference" href="#hr-reference">HR Reference</a>
										</div>
										
										<div id="hr-reference" class="first hidden inner-width6">
											<table class="no-style-no-border full">
												<tbody>
													<tr>														
														<td>
															<label>Job Title</label>
														</td>
														<td>
															<input type="text" />
														</td>
														<td>
															<label>TIN</label>
														</td>
														<td>
															<input type="text" />
														</td>
													</tr>
													<tr>
														<td>
															<label>Schedule</label>
														</td>
														<td>
															<input type="text"  />
														</td>
														<td>
															<label>SSS</label>
														</td>
														<td>
															<input type="text" />
														</td>
													</tr>
													<tr>
														<td>
															<label>Department</label>
														</td>
														<td>
															<input type="text"  />
														</td>
														<td>
															<label>Pag-ibig</label>
														</td>
														<td>
															<input type="text"  />
														</td>
													</tr>
													<tr>
														<td>
															<label>Shift</label>
														</td>
														<td>
															<input type="text" size="4" />
															<input type="text" size="4" />
														</td>
														<td>
															<label>Phil Health</label>
														</td>
														<td>
															<input type="text"  />
														</td>
													</tr>
													<tr>
														<td>
															<label>Assigned Location</label>
														</td>
														<td>
															<input type="text"  />
														</td>
														<td>
															<label>Date Hired</label>
														</td>
														<td>
															<input id="datepick" class="hasDatepick" type="date" value="" />
														</td>
													</tr>
													<tr>
														<td>
															<label>Employee Status</label>
														</td>
														<td>
															<select >
																<option value="regular">Regular</option>
																<option value="prob">Probationary</option>
																<option value="contractual">Contractual</option>
																<option value="ojt">OJT</option>
															</select>
														</td>
														<td>
															<label>Date Regularized</label>
														</td>
														<td>
															<input id="datepick" class="hasDatepick" type="date" value="" />
														</td>
													</tr>
													<tr>
														<td>
															<label>Term Status</label>
														</td>
														<td>
															<input type="text"  />
														</td>
														<td>
															<label>Date Resigned</label>
														</td>
														<td>
															<input id="datepick" class="hasDatepick" type="date" value="" />
														</td>
													</tr>
													<tr>
														<td>
														</td>
														<td>
														</td>
														<td>
															<label>Length of Stay</label>
														</td>
														<td>
															<input type="text"  disabled="disabled" value="0 years 0 months 0 days"/>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
										
										<div class="first inner-width6"><hr  /></div>
										
										<div class="first">
											<a id="link-payroll-reference" href="#payroll-reference">Payroll Reference</a>
										</div>
										
										<div id="payroll-reference" class="hidden inner-width6">
											<table class="no-style-no-border full">
												<tbody>
													<tr>														
														<td>
															<label>Basic Salary</label>
														</td>
														<td>
															<input type="text" /><br />
															<small>per month</small>
														</td>
														<td>
															<input type="text" disabled="disabled" /><br />
															<small>per day</small>
														</td>
														<td>
															<input type="text" disabled="disabled" /><br />
															<small>per hour</small>
														</td>														
													</tr>
													<tr>
														<td>
															<label>Overtime Rate</label>
														</td>
														<td>
															<input type="text" /><br />
															<small>per hour</small>
														</td>
													</tr>
													<tr>
														<td>
															<label>Non-working Day Rate</label>
														</td>
														<td>
															<input type="text" /><br />
															<small>Regular Holiday (per hour)</small>															
														</td>
														<td>
															<input type="text" /><br />
															<small>Special Holiday (per hour)</small>
														</td>
													</tr>
													<tr>
														<td>
															<label>Total Allowance</label><br />
															<a id="link-view-all-allowance" href="#all-allowances"><span class="icon icon-magnifier" title="View/Hide Details">&nbsp;</span></a> <a id="link-add-allowance" href="#all-allowances"><span class="icon icon-add" title="Add">&nbsp;</span></a>
														</td>
														<td>
															<input type="text" disabled="disabled" value="1000" /><br />
															<small>per month</small>														
														</td>
													</tr>
													
													<tr>
														<td colspan="4">
															<div id="all-allowances" class="first inner-width6 hidden">
																<table class="display stylized full">
																	<thead>
																		<th></th>
																		<th>Description</th>
																		<th>Amount</th>
																		<th>Effective Date</th>
																		<th>Approved Date</th>
																		<th>Approved By</th>
																	</thead>
																	<tbody>
																		<tr class="gradeA odd">
																			<td>
																				<a href="#popup-delete-allowance" class="nyroModal" rev="modal"><span class="icon icon-cancel" title="Delete">&nbsp;</span></a>
																				<a href="#popup-edit-allowance" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
																			</td>
																			<td>
																				Welfare Allowance
																			</td>
																			<td>
																				500
																			</td>
																			<td>
																				Nov. 10, 2010
																			</td>
																			<td>
																				Dec. 1, 2010
																			</td>
																			<td>
																				Gloria Macapagal
																			</td>
																		</tr>
																		<tr class="gradeA even">
																			<td>
																				<a href="#popup-delete-allowance" class="nyroModal" rev="modal"><span class="icon icon-cancel" title="Delete">&nbsp;</span></a>
																				<a href="#popup-edit-allowance" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
																			</td>
																			<td>
																				Rice Allowance
																			</td>
																			<td>
																				500
																			</td>
																			<td>
																				Nov. 10, 2010
																			</td>
																			<td>
																				Dec. 1, 2010
																			</td>
																			<td>
																				Mr. President
																			</td>
																		</tr>
																	</tbody>
																</table>
															</div>
														</td>
													</tr>
													
													<tr>
														<td>
															<label>Latest Increase</label><br />
															<a id="link-view-all-increase" href="#all-increases"><span class="icon icon-magnifier" title="View/Hide All">&nbsp;</span></a> 
															<a id="link-view-all-increase" href="#"><span class="icon icon-add" title="Add">&nbsp;</span></a>
														</td>
														<td>
															<input type="text" disabled="disabled" value="100" /><br />
															<small>Amount</small>
														</td>
														<td>
															<input type="text" disabled="disabled" value="Jul 15, 2010" /><br />
															<small>Effective Date</small>
														</td>
														<td>
															<input type="text" disabled="disabled" value="Govt Mandated Increase" /><br />
															<small>Description</small>															
														</td>
													</tr>
													<tr>
														<td colspan="4">
															<div id="all-increases" class="first inner-width6 hidden">
																<table class="display stylized full">
																	<thead>
																		<th></th>
																		<th>Description</th>
																		<th>Amount</th>
																		<th>Effective Date</th>
																		<th>Aprroved Date</th>
																		<th>Aprroved By</th>
																	</thead>
																	<tbody>
																		<tr class="gradeA odd">
																			<td>
																				<a href="#popup-delete-allowance" class="nyroModal" rev="modal"><span class="icon icon-cancel" title="Delete">&nbsp;</span></a>
																				<a href="#popup-edit-allowance" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
																			</td>
																			<td>
																				Govt Mandated Increase
																			</td>
																			<td>
																				100
																			</td>
																			<td>
																				Dec. 15, 2010
																			</td>
																			<td>
																				Dec. 1, 2010
																			</td>
																			<td>
																				Mr. President
																			</td>
																		</tr>
																		<tr class="gradeA even">
																			<td>
																				<a href="#popup-delete-allowance" class="nyroModal" rev="modal"><span class="icon icon-cancel" title="Delete">&nbsp;</span></a>
																				<a href="#popup-edit-allowance" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
																			</td>
																			<td>
																				Across the Board
																			</td>
																			<td>
																				500
																			</td>
																			<td>
																				Jul. 15, 2010
																			</td>
																			<td>
																				Jul. 1, 2010
																			</td>
																			<td>
																				Mr. President
																			</td>
																		</tr>
																	</tbody>
																</table>
															</div>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
										
										<div class="first inner-width6"><hr  /></div>
												
									</div>
									<!-- End of Employee Info -->
									
									<!-- Employee DTR -->
									<div id="employee-dtr" class="hidden hideable">
										<table>
											<tbody>
												<tr>
													<td>
														<label>ID #</label>
													</td>
													<td>
														<label>&nbsp;:&nbsp;</label>
													</td>
													<td>
														<label>12345</label>
													</td>
												</tr>
												<tr>
													<td>
														<label>Name</label>
													</td>	
													<td>
														<label>&nbsp;:&nbsp;</label>
													</td>	
													<td>
														<label>dela Cruz, John</label>
													</td>	
												</tr>
											</tbody>
										</table>	
										
										<hr />
										
										<!--div id="entry_list_paginate" class="dataTables_paginate paging_two_button" class="dataTables_paginate">
											<div id="entry_list_previous" class="paginate_disabled_previous" title="Previous"></div>
											<div id="entry_list_next" class="paginate_disabled_next" title="Next"></div>
										</div-->
										
										<table id="entry-list-table" class="display stylized" style="width:auto" >
											<thead>
												<th></th>
												<th style="width: 125px;">Date</th>
												<th style="width: 125px;">AM In</th>
												<th style="width: 125px;">AM Out</th>
												<th style="width: 125px;">PM In</th>
												<th style="width: 125px;">PM Out</th>
												<th style="width: 125px;">OT In</th>
												<th style="width: 125px;">OT Out</th>
											</thead>
											<tbody>
												<tr class="gradeA odd">
													<td>
														<a href="#popup-dtr_edit" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
													</td>
													<td>
														Dec. 1, 2010
													</td>
													<td>
														08:00
													</td>
													<td>
														12:00
													</td>
													<td>
														01:30
													</td>
													<td>
														05:30
													</td>
													<td>
														-
													</td>		
													<td>
														-
													</td>										
												</tr>
												<tr class="gradeA even">
													<td>
														<a href="#popup-dtr_edit" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
													</td>
													<td>
														Dec. 2, 2010
													</td>
													<td>
														08:00
													</td>
													<td>
														12:00
													</td>
													<td>
														01:30
													</td>
													<td>
														05:30
													</td>
													<td>
														-
													</td>		
													<td>
														-
													</td>	
												</tr>
												<tr class="gradeA odd">
													<td>
														<a href="#popup-dtr_edit" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
													</td>
													<td>
														Dec. 3, 2010
													</td>
													<td>
														08:00
													</td>
													<td>
														12:00
													</td>
													<td>
														01:30
													</td>
													<td>
														05:30
													</td>
													<td>
														-
													</td>		
													<td>
														-
													</td>										
												</tr>
												<tr class="gradeA even">
													<td>
														<a href="#popup-dtr_edit" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
													</td>
													<td>
														Dec. 4, 2010
													</td>
													<td>
														-
													</td>	
													<td>
														-
													</td>	
													<td>
														-
													</td>	
													<td>
														-
													</td>	
													<td>
														-
													</td>		
													<td>
														-
													</td>	
												</tr>
												<tr class="gradeA odd">
													<td>
														<a href="#popup-dtr_edit" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
													</td>
													<td>
														Dec. 5, 2010
													</td>
													<td>
														-
													</td>	
													<td>
														-
													</td>	
													<td>
														-
													</td>	
													<td>
														-
													</td>	
													<td>
														-
													</td>		
													<td>
														-
													</td>										
												</tr>
												<tr class="gradeA even">
													<td>
														<a href="#popup-dtr_edit" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
													</td>
													<td>
														Dec. 6, 2010
													</td>
													<td>
														08:00
													</td>
													<td>
														12:00
													</td>
													<td>
														01:30
													</td>
													<td>
														05:30
													</td>
													<td>
														-
													</td>		
													<td>
														-
													</td>	
												</tr>
												<tr class="gradeA odd">
													<td>
														<a href="#popup-dtr_edit" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
													</td>
													<td>
														Dec. 7, 2010
													</td>
													<td>
														08:00
													</td>
													<td>
														12:00
													</td>
													<td>
														01:30
													</td>
													<td>
														05:30
													</td>
													<td>
														-
													</td>		
													<td>
														-
													</td>										
												</tr>
												<tr class="gradeA even">
													<td>
														<a href="#popup-dtr_edit" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
													</td>
													<td>
														Dec. 8, 2010
													</td>
													<td>
														08:00
													</td>
													<td>
														12:00
													</td>
													<td>
														01:30
													</td>
													<td>
														05:30
													</td>
													<td>
														-
													</td>		
													<td>
														-
													</td>	
												</tr>
												<tr class="gradeA odd">
													<td>
														<a href="#popup-dtr_edit" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
													</td>
													<td>
														Dec. 9, 2010
													</td>
													<td>
														08:00
													</td>
													<td>
														12:00
													</td>
													<td>
														01:30
													</td>
													<td>
														05:30
													</td>
													<td>
														-
													</td>		
													<td>
														-
													</td>										
												</tr>
												<tr class="gradeA even">
													<td>
														<a href="#popup-dtr_edit" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
													</td>
													<td>
														Dec. 10, 2010
													</td>
													<td>
														08:00
													</td>
													<td>
														12:00
													</td>
													<td>
														01:30
													</td>
													<td>
														05:30
													</td>
													<td>
														-
													</td>		
													<td>
														-
													</td>	
												</tr>
												<tr class="gradeA even">
													<td>
														<a href="#popup-dtr_edit" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
													</td>
													<td>
														Dec. 11, 2010
													</td>
													<td>
														-
													</td>	
													<td>
														-
													</td>	
													<td>
														-
													</td>	
													<td>
														-
													</td>	
													<td>
														-
													</td>		
													<td>
														-
													</td>	
												</tr>
												<tr class="gradeA even">
													<td>
														<a href="#popup-dtr_edit" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
													</td>
													<td>
														Dec. 12, 2010
													</td>
													<td>
														-
													</td>	
													<td>
														-
													</td>	
													<td>
														-
													</td>	
													<td>
														-
													</td>	
													<td>
														-
													</td>		
													<td>
														-
													</td>	
												</tr>
												<tr class="gradeA even">
													<td>
														<a href="#popup-dtr_edit" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
													</td>
													<td>
														Dec. 13, 2010
													</td>
													<td>
														08:00
													</td>
													<td>
														12:00
													</td>
													<td>
														01:30
													</td>
													<td>
														05:30
													</td>
													<td>
														-
													</td>		
													<td>
														-
													</td>	
												</tr>
												<tr class="gradeA even">
													<td>
														<a href="#popup-dtr_edit" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
													</td>
													<td>
														Dec. 14, 2010
													</td>
													<td>
														08:00
													</td>
													<td>
														12:00
													</td>
													<td>
														01:30
													</td>
													<td>
														05:30
													</td>
													<td>
														-
													</td>		
													<td>
														-
													</td>	
												</tr>
												<tr class="gradeA even">
													<td>
														<a href="#popup-dtr_edit" class="nyroModal" rev="modal"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
													</td>
													<td>
														Dec. 15, 2010
													</td>
													<td>
														08:00
													</td>
													<td>
														12:00
													</td>
													<td>
														01:30
													</td>
													<td>
														05:30
													</td>
													<td>
														-
													</td>		
													<td>
														-
													</td>	
												</tr>
											</tbody>
											<tfoot>
												<th></th>
												<th>Date</th>
												<th>AM In</th>
												<th>AM Out</th>
												<th>PM In</th>
												<th>PM Out</th>
												<th>OT In</th>
												<th>OT Out</th>
											</tfoot>
										</table>
										
										<div id="entry_list_paginate" class="dataTables_paginate paging_two_button" class="dataTables_paginate">
											<div id="entry_list_previous" class="paginate_disabled_previous" title="Previous"></div>
											<div id="entry_list_next" class="paginate_disabled_next" title="Next"></div>
										</div>

									</div>	
									<!-- End of Employee DTR -->
									
									<!-- Employee Leave -->
									<div id="employee-leave" class="hidden hideable">
										<div class="first inner-width6 full">
											<table>
												<tbody>
													<tr>
														<td>
															<label>ID #</label>
														</td>
														<td>
															<label>&nbsp;:&nbsp;</label>
														</td>
														<td width="450px">
															<label>12345</label>
														</td>
														<td>
															<label>Available Sick Leave</label>
														</td>
														<td>
															<label>&nbsp;:&nbsp;</label>
														</td>
														<td width="50px">
															<label>10</label>
														</td>
													</tr>
													<tr>
														<td>
															<label>Name</label>
														</td>	
														<td>
															<label>&nbsp;:&nbsp;</label>
														</td>	
														<td>
															<label>dela Cruz, John</label>
														</td>	
														<td>
															<label>Available Vacation Leave</label>
														</td>
														<td>
															<label>&nbsp;:&nbsp;</label>
														</td>
														<td>
															<label>10</label>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
										
										<div class="first inner-width6"><hr /></div>
										
										<div id="leave-form" class="first inner-width6">											
											<table class="no-style-no-border full">
												<tbody>
													<tr>
														<td>
															<label>Type</label>
														</td>
														<td>
															<label>Date Applied</label>
														</td>
														<td>
															<label>Status</label>
														</td>
													</tr>
													<tr>
														<td>
															<select id="select-leave" name="select_leave">
																<option value="sl_with_pay">Sick Leave with Pay</option>
																<option value="sl_wo_pay">Sick Leave w/o Pay</option>
																<option value="vl_with_pay">Vacation Leave with Pay</option>
																<option value="vl_wo_pay">Vacation Leave w/o Pay</option>
															</select>
														</td>
														<td>
															<input id="datepick" class="hasDatepick" type="date" value="" />
														</td>
														<td>
															<select>
																<option value="new">New</option>
																<option value="pending">Pending</option>
																<option value="cancel">Cancelled</option>
																<option value="approved">Approved</option>
															</select>
														</td>
													</tr>
													<tr>
														<td>
															<label>From</label>
														</td>
														<td>
															<label>To</label>
														</td>
														<td>
															<label>No. of days</label>
														</td>
													</tr>
													<tr>														
														<td>
															<input id="datepick" class="hasDatepick" type="date" value="" />
														</td>														
														<td>
															<input id="datepick" class="hasDatepick" type="date" value="" />
														</td>
														<td>
															<input type="text" size="4" disabled="disabled" />
														</td>
													</tr>
													<tr>
														<td>
															<label class="choice">
																<input type="radio" name="from_" value="from_am" />AM
															</label>
															<label class="choice">
																<input type="radio" name="from_" value="from_pm" />PM
															</label>
														</td>
														<td>
															<label class="choice">
																<input type="radio" name="to_" value="to_am" />AM
															</label>
															<label class="choice">
																<input type="radio" name="to_" value="to_pm" />PM
															</label>
														</td>
													</tr>
													<tr>
														<td colspan="2">
															<label>Reason</label>
														</td>
													</tr>
													<tr>
														<td colspan="3">
															<input type="text" class="full" />
														</td>
													</tr>
													<tr>
														<td>
															<label>Approver</label>
														</td>
														<td>
															<label>Remarks</label>
														</td>
													</tr>
													<tr>
														<td>
															<input type="text" class="full" />
														</td>
														<td colspan="2">
															<input type="text" class="full" />
														</td>
													</tr>
												</tbody>
											</table>											
											
											<br  />
											<a href="#" class="btn btn-blue">Save</a>
											<a href="#" class="btn btn-red">Clear</a>
										</div>
										
										<div class="first inner-width6"><hr /></div>
										
										<div>
											<a id="link-view-leaves" href="#table-leaves"><small>View/Hide Leaves</small></a>
										</div>
										
										<div id="table-leaves" class="first inner-width6 hidden">										
											<table id="entry-list-table" class="display stylized full">
												<thead>
													<th></th>
													<th>Type</th>
													<th>From</th>
													<th>To</th>
													<th>Reason</th>
													<th>Status</th>
												</thead>
												<tbody>
													<tr class="gradeA odd">
														<td>
															<a href="#"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
														</td>
														<td>
															Sick Leave with Pay
														</td>
														<td>
															Oct. 23, 2010 (AM)
														</td>
														<td>
															Oct. 23, 2010 (PM)
														</td>
														<td>
															High Fever
														</td>
														<td>
															Approved
														</td>									
													</tr>
													<tr class="gradeA even">
														<td>
															<a href="#"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
														</td>
														<td>
															Vacation Leave with Pay
														</td>
														<td>
															Nov. 2, 2010 (PM)
														</td>
														<td>
															Nov. 5, 2010 (AM)
														</td>
														<td>
															Attended family reunion in the province.
														</td>
														<td>
															Cancelled
														</td>
													</tr>
												</tbody>
												<tfoot>
													<th></th>
													<th>Type</th>
													<th>From</th>
													<th>To</th>
													<th>Reason</th>
													<th>Status</th>
												</tfoot>
											</table>
											
											<div id="entry_list_paginate" class="dataTables_paginate paging_two_button" class="dataTables_paginate">
												<div id="entry_list_previous" class="paginate_disabled_previous" title="Previous"></div>
												<div id="entry_list_next" class="paginate_disabled_next" title="Next"></div>
											</div>
										</div>
									</div>
									<!-- End of Employee Leave -->
									
									<!-- Employee Overtime/Undertime -->
									<div id="employee-ot" class="hidden hideable">
										<div class="first inner-width6 full">
											<table>
												<tbody>
													<tr>
														<td>
															<label>ID #</label>
														</td>
														<td>
															<label>&nbsp;:&nbsp;</label>
														</td>
														<td width="450px">
															<label>12345</label>
														</td>
														<td>
															<label>Available Sick Leave</label>
														</td>
														<td>
															<label>&nbsp;:&nbsp;</label>
														</td>
														<td width="50px">
															<label>10</label>
														</td>
													</tr>
													<tr>
														<td>
															<label>Name</label>
														</td>	
														<td>
															<label>&nbsp;:&nbsp;</label>
														</td>	
														<td>
															<label>dela Cruz, John</label>
														</td>	
														<td>
															<label>Available Vacation Leave</label>
														</td>
														<td>
															<label>&nbsp;:&nbsp;</label>
														</td>
														<td>
															<label>10</label>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
										
										<div class="first inner-width6"><hr /></div>
										
										<div id="ot-undertime-form" class="first inner-width6">											
											<table class="no-style-no-border full">
												<tbody>
													<tr>
														<td>
															<label>Type</label>
														</td>
														<td>
															<label>Date Applied</label>
														</td>
														<td>
															<label>Status</label>
														</td>
													</tr>
													<tr>
														<td>
															<select id="select-leave" name="select_leave">
																<option value="overtime">Overtime Application</option>
																<option value="undertime">Undertime Application</option>
															</select>
														</td>														
														<td>
															<input id="datepick" class="hasDatepick" type="date" value="" />
														</td>
														<td>
															<select>
																<option value="new">New</option>
																<option value="pending">Pending</option>
																<option value="pending">Cancelled</option>
																<option value="approved">Approved</option>
															</select>
														</td>
													</tr>
													<tr>
														<td>
															<label>From</label>
														</td>
														<td>
															<label>To</label>
														</td>
														<td>
															<label>Total Hours</label>
														</td>
													</tr>
													<tr>														
														<td>
															<input type="text" size="4" maxlength="2" /><b>:</b>
															<input type="text" size="4" maxlength="2" />
														</td>
														<td>
															<input type="text" size="4" maxlength="2" /><b>:</b>
															<input type="text" size="4" maxlength="2" />
														</td>
														<td>
															<input type="text" size="4" disabled="disabled" />
														</td>
													</tr>
													<tr>
														<td colspan="2">
															<label>Reason</label>
														</td>
													</tr>
													<tr>
														<td colspan="4">
															<input type="text" class="full" />
														</td>
													</tr>
													<tr>
														<td>
															<label>Approver</label>
														</td>
														<td>
															<label>Remarks</label>
														</td>
													</tr>
													<tr>
														<td>
															<input type="text" class="full" />
														</td>
														<td colspan="2">
															<input type="text" class="full" />
														</td>
													</tr>
												</tbody>
											</table>											
											
											<br  />
											<a href="#" class="btn btn-blue">Save</a>
											<a href="#" class="btn btn-red">Clear</a>
										</div>
										
										<div class="first inner-width6"><hr  /></div>
										
										<div>
											<a id="link-view-ot-undertime" href="#table-ot-undertime"><small>View/Hide Applications</small></a>
										</div>
										
										<div id="table-ot-undertime" class="first inner-width6 hidden">
											<table id="entry-list-table" class="display stylized full">
												<thead>
													<th></th>
													<th>Type</th>
													<th>Date</th>
													<th>From</th>
													<th>To</th>
													<th>Reason</th>
													<th>Status</th>
												</thead>
												<tbody>
													<tr class="gradeA odd">
														<td>
															<a href="#"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
														</td>
														<td>
															Overtime
														</td>
														<td>
															Oct. 4, 2010
														</td>
														<td>
															19:00
														</td>
														<td>
															23:00
														</td>
														<td>
															Continue welding
														</td>
														<td>
															Approved
														</td>									
													</tr>
													<tr class="gradeA even">
														<td>
															<a href="#"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
														</td>
														<td>
															Undertime
														</td>
														<td>
															Dec. 4, 2010
														</td>
														<td>
															10:00
														</td>
														<td>
															12:00
														</td>
														<td>
															Family Matters
														</td>
														<td>
															Approved
														</td>	
													</tr>
												</tbody>
												<tfoot>
													<th></th>
													<th>Type</th>
													<th>Date</th>
													<th>From</th>
													<th>To</th>
													<th>Reason</th>
													<th>Status</th>
												</tfoot>
											</table>
											
											<div id="entry_list_paginate" class="dataTables_paginate paging_two_button" class="dataTables_paginate">
												<div id="entry_list_previous" class="paginate_disabled_previous" title="Previous"></div>
												<div id="entry_list_next" class="paginate_disabled_next" title="Next"></div>
											</div>
										</div>
									</div>
									<!-- End of Employee Overtime/Undertime -->
									
									<!-- Employee Contributions -->
									<div id="employee-contributions" class="hidden hideable">
										<div class="first inner-width6 full">
											<table>
												<tbody>
													<tr>
														<td>
															<label>ID #</label>
														</td>
														<td>
															<label>&nbsp;:&nbsp;</label>
														</td>
														<td width="450px">
															<label>12345</label>
														</td>
													</tr>
													<tr>
														<td>
															<label>Name</label>
														</td>	
														<td>
															<label>&nbsp;:&nbsp;</label>
														</td>	
														<td>
															<label>dela Cruz, John</label>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
										
										<div class="first inner-width6"><hr /></div>
										
										<div id="contributions-form" class="first inner-width6">									
											<table class="no-style-no-border full">
												<tbody>
													<tr>
														<td>
															<select>
																<option value="sss">SSS</option>
																<option value="pagibig">Pag-ibig</option>
																<option value="philhealth">Phil Health</option>
															</select>
														</td>
													</tr>
													<tr>
														<td>
															<label>Monthly Contribution</label>
														</td>
														<td>
															<label>Mode of Payment</label>
														</td>
														<td>
															<label>Total Contribution</label>
														</td>
													</tr>
													<tr>
														<td>
															<input type="text" />
														</td>														
														<td>
															<select>
																<option value="weeklyl">Weeklyl</option>
																<option value="bi_weeklyl">Bi-weeklyl</option>
																<option value="monthlyl">Monthly</option>
															</select>
														</td>
														<td>
															<input type="text" disabled="disabled" 	/>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
											
										<div class="first inner-width6"><hr /></div>
										
										<div>
											<a id="link-view-sss-contributions" href="#table-sss-contributions"><small>View/Hide SSS Conttributions</small></a>
										</div>
										
										<div id="table-sss-contributions" class="first inner-width6 hidden">
											<table id="entry-list-table" class="display stylized full">
												<thead>
													<th></th>
													<th>Type</th>
													<th>Principal Amount</th>
													<th>Date Due</th>
													<th>Mode of Payment</th>
													<th>Amount</th>
													<th>Balance</th>
												</thead>
												<tbody>
													<tr class="gradeA odd">
														<td>
															<a href="#"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
														</td>
														<td>
															SSS Loan
														</td>
														<td>
															9,500
														</td>
														<td>
															March 10, 2011
														</td>
														<td>
															Every Payroll
														</td>
														<td>
															250
														</td>
														<td>
															1,500
														</td>									
													</tr>
													<tr class="gradeA even">
														<td>
															<a href="#"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
														</td>
														<td>
															Cash Advance
														</td>
														<td>
															2,500
														</td>
														<td>
															January 26, 2010
														</td>
														<td>
															Every Second Payroll
														</td>
														<td>
															500
														</td>
														<td>
															500
														</td>			
													</tr>
												</tbody>
												<tfoot>
													<th></th>
													<th>Type</th>
													<th>Principal Amount</th>
													<th>Date Due</th>
													<th>Mode of Payment</th>
													<th>Amount</th>
													<th>Balance</th>
												</tfoot>
											</table>
											
											<div id="entry_list_paginate" class="dataTables_paginate paging_two_button" class="dataTables_paginate">
												<div id="entry_list_previous" class="paginate_disabled_previous" title="Previous"></div>
												<div id="entry_list_next" class="paginate_disabled_next" title="Next"></div>
											</div>
										</div>
											
										<div class="first inner-width6"><hr /></div>
										
										<div>
											<a id="link-view-pagibig-contributions" href="#table-pagibig-contributions"><small>View/Hide Pag-ibig Conttributions</small></a>
										</div>
										
										<div id="table-pagibig-contributions" class="first inner-width6 hidden">
											<table id="entry-list-table" class="display stylized full">
												<thead>
													<th></th>
													<th>Type</th>
													<th>Principal Amount</th>
													<th>Date Due</th>
													<th>Mode of Payment</th>
													<th>Amount</th>
													<th>Balance</th>
												</thead>
												<tbody>
													<tr class="gradeA odd">
														<td>
															<a href="#"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
														</td>
														<td>
															SSS Loan
														</td>
														<td>
															9,500
														</td>
														<td>
															March 10, 2011
														</td>
														<td>
															Every Payroll
														</td>
														<td>
															250
														</td>
														<td>
															1,500
														</td>									
													</tr>
													<tr class="gradeA even">
														<td>
															<a href="#"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
														</td>
														<td>
															Cash Advance
														</td>
														<td>
															2,500
														</td>
														<td>
															January 26, 2010
														</td>
														<td>
															Every Second Payroll
														</td>
														<td>
															500
														</td>
														<td>
															500
														</td>			
													</tr>
												</tbody>
												<tfoot>
													<th></th>
													<th>Type</th>
													<th>Principal Amount</th>
													<th>Date Due</th>
													<th>Mode of Payment</th>
													<th>Amount</th>
													<th>Balance</th>
												</tfoot>
											</table>
											
											<div id="entry_list_paginate" class="dataTables_paginate paging_two_button" class="dataTables_paginate">
												<div id="entry_list_previous" class="paginate_disabled_previous" title="Previous"></div>
												<div id="entry_list_next" class="paginate_disabled_next" title="Next"></div>
											</div>
										</div>
											
										<div class="first inner-width6"><hr /></div>
										
										<div>
											<a id="link-view-philhealth-contributions" href="#table-philhealth-contributions"><small>View/Hide Phil Health Conttributions</small></a>
										</div>
										
										<div id="table-philhealth-contributions" class="first inner-width6 hidden">
											<table id="entry-list-table" class="display stylized full">
												<thead>
													<th></th>
													<th>Type</th>
													<th>Principal Amount</th>
													<th>Date Due</th>
													<th>Mode of Payment</th>
													<th>Amount</th>
													<th>Balance</th>
												</thead>
												<tbody>
													<tr class="gradeA odd">
														<td>
															<a href="#"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
														</td>
														<td>
															SSS Loan
														</td>
														<td>
															9,500
														</td>
														<td>
															March 10, 2011
														</td>
														<td>
															Every Payroll
														</td>
														<td>
															250
														</td>
														<td>
															1,500
														</td>									
													</tr>
													<tr class="gradeA even">
														<td>
															<a href="#"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
														</td>
														<td>
															Cash Advance
														</td>
														<td>
															2,500
														</td>
														<td>
															January 26, 2010
														</td>
														<td>
															Every Second Payroll
														</td>
														<td>
															500
														</td>
														<td>
															500
														</td>			
													</tr>
												</tbody>
												<tfoot>
													<th></th>
													<th>Type</th>
													<th>Principal Amount</th>
													<th>Date Due</th>
													<th>Mode of Payment</th>
													<th>Amount</th>
													<th>Balance</th>
												</tfoot>
											</table>
											
											<div id="entry_list_paginate" class="dataTables_paginate paging_two_button" class="dataTables_paginate">
												<div id="entry_list_previous" class="paginate_disabled_previous" title="Previous"></div>
												<div id="entry_list_next" class="paginate_disabled_next" title="Next"></div>
											</div>
										</div>
										
									</div>
									<!-- End of Employee Contributions -->
									
									<!-- Employee Other Deductions -->
									<div id="employee-deductions" class="hidden hideable">
										<div class="first inner-width6 full">
											<table class="full">
												<tbody>
													<tr>
														<td>
															<label>ID #</label>
														</td>
														<td>
															<label>&nbsp;:&nbsp;</label>
														</td>
														<td width="450px">
															<label>12345</label>
														</td>
													</tr>
													<tr>
														<td>
															<label>Name</label>
														</td>	
														<td>
															<label>&nbsp;:&nbsp;</label>
														</td>	
														<td>
															<label>dela Cruz, John</label>
														</td>
														<td>
															<label>Total Deductions :</label>
														</td>
														<td width="50px">
															<label>000,000.00</label>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
										
										<div class="first inner-width6"><hr /></div>
										
										<div id="leave-form" class="first inner-width6">											
											<table class="no-style-no-border full">
												<tbody>
													<tr>
														<td>
															<label>Type</label>
														</td>
														<td>
															<label>Date Applied</label>
														</td>
														<td>
															<label>Date Due</label>
														</td>
													</tr>
													<tr>
														<td>
															<select id="select-deduction" name="">
																<option value="sss_loan">SSS Loan</option>
																<option value="pagibig_loan">Pag-ibig Loan</option>
																<option value="cash_advance">Cash Advance</option>
																<option value="sinking_fund">Sinking Fund</option>
																<option value="meals">Meal</option>
																<option value="water">Water</option>
																<option value="others">Other Miscellaneous</option>
															</select>
														</td>														
														<td>
															<input id="datepick" class="hasDatepick" type="date" value="" />
														</td>
														<td>
															<input id="datepick" class="hasDatepick" type="date" value="" />
														</td>
													</tr>
													<tr id="deduction-details" class="hidden">
														<td colspan="2">
															<label>Details</label><br />
															<input type="text" class="full" />
														</td>
													</tr>													
													<tr>
														<td>
															<label>Principal Amount</label>
														</td>
														<td>
															<label>Mode of Payment</label>
														</td>
														<td>
															<label>Amount</label>
														</td>
													</tr>
													<tr>														
														<td>
															<input type="text" />
														</td>
														<td>
															<select>
																<option value="weekly">Weekly</option>
																<option value="bi_weekly">Bi-weekly</option>
																<option value="monthly">Monthly</option>
															</select>
														</td>
														<td>
															<input type="text" />
														</td>
													</tr>
													<tr>
														<td>
															<label>Approver</label>
														</td>
														<td>
															<label>Remarks</label>
														</td>
													</tr>
													<tr>
														<td>
															<input type="text" class="full" />
														</td>
														<td colspan="2">
															<input type="text" class="full" />
														</td>
													</tr>
												</tbody>
											</table>											
											
											<br  />
											<a href="#" class="btn btn-blue">Save</a>
											<a href="#" class="btn btn-red">Clear</a>
										</div>
										
										<div class="first inner-width6"><hr /></div>
										
										<div>
											<a id="link-view-deductions" href="#table-deductions"><small>View/Hide Deductions</small></a>
										</div>
										
										<div id="table-deductions" class="first inner-width6 hidden">
											<table id="entry-list-table" class="display stylized full">
												<thead>
													<th></th>
													<th>Type</th>
													<th>Principal Amount</th>
													<th>Date Due</th>
													<th>Mode of Payment</th>
													<th>Amount</th>
													<th>Balance</th>
												</thead>
												<tbody>
													<tr class="gradeA odd">
														<td>
															<a href="#"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
														</td>
														<td>
															SSS Loan
														</td>
														<td>
															9,500
														</td>
														<td>
															March 10, 2011
														</td>
														<td>
															Every Payroll
														</td>
														<td>
															250
														</td>
														<td>
															1,500
														</td>									
													</tr>
													<tr class="gradeA even">
														<td>
															<a href="#"><span class="icon icon-pencil" title="Edit">&nbsp;</span></a>
														</td>
														<td>
															Cash Advance
														</td>
														<td>
															2,500
														</td>
														<td>
															January 26, 2010
														</td>
														<td>
															Every Second Payroll
														</td>
														<td>
															500
														</td>
														<td>
															500
														</td>			
													</tr>
												</tbody>
												<tfoot>
													<th></th>
													<th>Type</th>
													<th>Principal Amount</th>
													<th>Date Due</th>
													<th>Mode of Payment</th>
													<th>Amount</th>
													<th>Balance</th>
												</tfoot>
											</table>
											
											<div id="entry_list_paginate" class="dataTables_paginate paging_two_button" class="dataTables_paginate">
												<div id="entry_list_previous" class="paginate_disabled_previous" title="Previous"></div>
												<div id="entry_list_next" class="paginate_disabled_next" title="Next"></div>
											</div>
										</div>
									</div>
									<!-- End of Employee Other Deductions -->
									
									<!-- Payslip -->
									<div id="employee-payslip" class="hidden hideable">
										<div class="full">
											<table>
												<tbody>
													<tr>
														<td>
															<label>ID #</label>
														</td>
														<td>
															<label>&nbsp;:&nbsp;</label>
														</td>
														<td width="430px">
															<label>12345</label>
														</td>	
														<td>
															<label>Period</label>
														</td>
														<td>
															<label>&nbsp;:&nbsp;</label>
														</td>
														<td>
															<label>Dec. 01, 2010 - Dec. 15, 2010</label>
														</td>
													</tr>
													<tr>
														<td>
															<label>Name</label>
														</td>	
														<td>
															<label>&nbsp;:&nbsp;</label>
														</td>	
														<td>
															<label>dela Cruz, John</label>
														</td>
														<td>
															<label>Shift</label>
														</td>
														<td>
															<label>&nbsp;:&nbsp;</label>
														</td>
														<td>
															<label></label>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
										<hr />
										<div id="payslip-income" class="column inner-width3 first">		
											<label>Income</label>									
											<table class="full">
												<thead>
													<th style="width:60%;"></th>
													<th style="width:20%;" class="ta-right"><label>Hours</label></th>
													<th style="width:20%;" class="ta-right"><label>Amount</label></th>
												</thead>
												<tbody>
													<tr>
														<td>
															Basic Pay
														</td>
														<td class="ta-right">
															120.00
														</td>
														<td class="ta-right">
															6,000.00
														</td>
													</tr>
													<tr>
														<td>
															Overtime Pay
														</td>
														<td class="ta-right">
															0.00
														</td>
														<td class="ta-right">
															0.00
														</td>
													</tr>
													<tr>
														<td>
															Rest Day Pay
														</td>
														<td class="ta-right">
															0.00
														</td>
														<td class="ta-right">
															0.00
														</td>
													</tr>
													<tr>
														<td>
															Regular Holiday Pay
														</td>
														<td class="ta-right">
															0.00
														</td>
														<td class="ta-right">
															0.00
														</td>
													</tr>
													<tr>
														<td>
															Special Holiday Pay
														</td>
														<td class="ta-right">
															0.00
														</td>
														<td class="ta-right">
															0.00
														</td>
													</tr>
													<tr>
														<td class="ta-right">
															<label>Sub Total</label>
														</td>
														<td></td>
														<td class="ta-right">
															<label>6,000.00</label>
														</td>
													</tr>
													<tr><td>&nbsp;</td></tr>
													<tr>
														<td><label>Allowance</label></td>
													</tr>
													<tr>
														<td>
															Welfare Allowance
														</td>
														<td class="ta-right">-</td>
														<td class="ta-right">
															500
														</td>
													</tr>
													<tr>
														<td>
															Rice Allowance
														</td>
														<td class="ta-right">-</td>
														<td class="ta-right">
															500
														</td>
													</tr>
													<tr>
														<td class="ta-right">
															<label>Sub Total</label>
														</td>
														<td></td>
														<td class="ta-right">
															<label>1,000.00</label>
														</td>
													</tr>
													<tr>
														<td></td>
														<td colspan="2">
															<hr />
														</td>
													</tr>
													<tr>
														<td class="ta-right">
															<label>Total Gross</label>
														</td>
														<td></td>
														<td class="ta-right">
															<label>7,000.00</label>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
										
										<div id="payslip-deductions" class="column inner-width3">
											<label>Deductions</label>									
											<table class="full">
												<thead>
													<th style="width:40%;"></th>
													<th style="width:20%;" class="ta-right"><label>Amount</label></th>
													<th style="width:2o%;" class="ta-right"><label>Principal</label></th>
													<th style="width:2o%;" class="ta-right"><label>Balance</label></th>
												</thead>
												<tbody>
													<tr>
														<td>
															Withholding Tax
														</td>
														<td class="ta-right">
															455.50
														</td>
														<td class="ta-right">
															0.00
														</td>
														<td class="ta-right">
															0.00
														</td>
													</tr>
													<tr>
														<td>
															SSS Contribution
														</td>
														<td class="ta-right">
															250.00
														</td>
														<td class="ta-right">
															0.00
														</td>
														<td class="ta-right">
															0.00
														</td>
													</tr>
													<tr>
														<td>
															HMDF Contribution
														</td>
														<td class="ta-right">
															250.00
														</td>
														<td class="ta-right">
															0.00
														</td>
														<td class="ta-right">
															0.00
														</td>
													</tr>
													<tr>
														<td>
															Phil Health Contribution
														</td>
														<td class="ta-right">
															100.00
														</td>
														<td class="ta-right">
															0.00
														</td>
														<td class="ta-right">
															0.00
														</td>
													</tr>
													<tr>
														<td class="ta-right">
															<label>Sub Total</label>
														</td>
														<td class="ta-right">
															<label>1,255.00</label>
														</td>
													</tr>
													<tr><td>&nbsp;</td></tr>
													<tr>
														<td><label>Other Deductions</label></td>
													</tr>
													<tr>
														<td>
															SSS Loan
														</td>
														<td class="ta-right">
															350.00
														</td>
														<td class="ta-right">
															12,000.00
														</td>
														<td class="ta-right">
															11,650.00
														</td>
													</tr>
													<tr>
														<td>
															HMDF Loan
														</td>
														<td class="ta-right">
															200.00
														</td>
														<td class="ta-right">
															8,500.00
														</td>
														<td class="ta-right">
															8,100.00
														</td>
													</tr>
													<tr>
														<td>
															Cash Advance
														</td>
														<td class="ta-right">
															1,500
														</td>
														<td class="ta-right">
															1,500.00
														</td>
														<td class="ta-right">
															0.00
														</td>
													</tr>
													<tr>
														<td>
															Meal
														</td>
														<td class="ta-right">
															500
														</td>
														<td class="ta-right">
															500.00
														</td>
														<td class="ta-right">
															0.00
														</td>
													</tr>
													<tr>
														<td>
															Water
														</td>
														<td class="ta-right">
															340
														</td>
														<td class="ta-right">
															340
														</td>
														<td class="ta-right">
															0.00
														</td>
													</tr>
													<tr>
														<td class="ta-right">
															<label>Sub Total</label>
														</td>
														<td class="ta-right">
															<label>2,890.00</label>
														</td>
													</tr>
													<tr>
														<td></td>
														<td colspan="3">
															<hr />
														</td>
													</tr>
													<tr>
														<td class="ta-right">
															<label>Total Deduction</label>
														</td>
														<td class="ta-right">
															<label>3,945.00</label>
														</td>
													</tr>
													<tr>
														<td colspan="4"><hr /></td>
													</tr>
													<tr>
														<td colspan="2" class="ta-right">
															<label style="font-size:14px">Net Income:</label>
														</td>
														<td class="ta-right">
															<label style="font-size:14px">3,055.00</label>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
										
										<div class="column inner-width6 first"><hr /></div>
										
										<div class="column inner-width6 first">
											<a id="link-view-payslips" href="#table-payslips"><small>View/Hide Payslips</small></a>
										</div>
										
										<div id="table-payslips" class="hidden first">
											<table class="display stylized full" style="width:auto" >
												<thead>
													<th></th>
													<th style="width:40%">Period</th>
													<th style="width:20%">Total Gross</th>
													<th style="width:20%">Total Deduction</th>
													<th style="width:20%">Net Income</th>
												</thead>
												<tbody>
													<tr class="gradeA odd">
														<td>
															<a id="link-view-payslip" href="#"><span class="icon icon-magnifier" title="View">&nbsp;</span></a>
														</td>
														<td>
															Nov. 15 - 30, 2010
														</td>
														<td>
															7,500
														</td>
														<td>
															2,500
														</td>
														<td>
															5,000
														</td>									
													</tr>
													<tr class="gradeA even">
														<td>
															<a id="link-view-payslip" href="#"><span class="icon icon-magnifier" title="View">&nbsp;</span></a>
														</td>
														<td>
															Nov. 1 - 15, 2010
														</td>
														<td>
															6,500
														</td>
														<td>
															3,500
														</td>
														<td>
															3,000
														</td>			
													</tr>
												</tbody>
												<tfoot>
													<th></th>
													<th>Period</th>
													<th>Total Gross</th>
													<th>Total Deduction</th>
													<th>Net Income</th>
												</tfoot>
											</table>
											
											<div id="entry_list_paginate" class="dataTables_paginate paging_two_button" class="dataTables_paginate">
												<div id="entry_list_previous" class="paginate_disabled_previous" title="Previous"></div>
												<div id="entry_list_next" class="paginate_disabled_next" title="Next"></div>
											</div>
										</div>
									</div>
									<!-- End of Payslip -->
																																						
								</section>
							</div>       
						</div>  
						
					</div>
					<!-- End of Payroll Tab -->
					
					<!-- Reports Tab -->
					<div id="report_tab" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
					
						<!-- Report Filter -->
						<div class="column width2 first">
							<div class="content-box corners">
								<header>
									<h3><img src="<?= $this->config->item('webroot') ?>/img/information.png" alt="" />Filters </h3>								
								</header>
								<section>
									
									<label>Select From</label>
									<select id="report-filters" name="report_filters">
										<!--<option value="hr">Employee 201 - HR</option>-->
										<option value="payroll">Employee 201 - Payroll</option>
										<option value="leave">Leave Applications</option>
										<option value="overtime">Overtime Applications</option>
										<option value="undertime">Undertime Applications</option>
										<option value="contributions">Contributions</option>
										<option value="deductions">Other Deductions</option>
										<option value="payslips">Print Payslips</option>
									</select>
									
									<div class="inner-width2 first"><hr /></div>
									
									<!-- Employee 201 - Payroll -->
									<div id="report-payroll" class="inner-width2 report-hideable">
										<table class="no-style-no-border full">
											<tbody>
												<tr>
													<td colspan="2">
														<label><input class="payroll-options" type="radio" name="payroll-options" checked="checked" value="employee_rates" />Employee Rates</label>
													</td>
												</tr>
												<tr class="emp-rate-row-hidden">
													<td></td>
													<td style="width:90%">
														<label class="choice">
															<input type="checkbox" name="payroll_rates" checked="checked" />Basic Salary
														</label>
													</td>
												</tr>
												<tr class="emp-rate-row-hidden">
													<td></td>
													<td>
														<label class="choice">
															<input type="checkbox" name="payroll_rates" checked="checked" />Overtime Rate
														</label>
													</td>
												</tr>
												<tr class="emp-rate-row-hidden">
													<td></td>
													<td>
														<label class="choice">
															<input type="checkbox" name="payroll_rates" checked="checked" />Holiday Rates
														</label>
													</td>
												</tr>
												<!--<tr>
													<td colspan="2">
														<label><input type="radio" name="payroll_" />Allowance</label>
													</td>
												</tr>-->
												<tr>
													<td colspan="2">
														<label><input class="payroll-options" type="radio" name="payroll-options" value="recvd_increase" />Received Increase</label>
													</td>	
												</tr>
												<tr class="increase-row-hidden hidden">
													<td></td>
													<td style="width:90%">
														<label class="choice">From</label><br />
														<input type="date" />
													</td>
												</tr>
												<tr class="increase-row-hidden hidden">
													<td></td>
													<td style="width:90%">
														<label class="choice">To</label><br />
														<input type="date" />
													</td>
												</tr>
											</tbody>
										</table>
									</div>
									<!-- End of Employee 201 - Payroll -->
									
									<!-- Leave Applications -->
									<div id="report-leave" class="inner-width2 hidden report-hideable">
										<table class="no-style full">
											<tbody>
												<tr>
													<td colspan="2">
														<label>Leave Type</label>
													</td>
												</tr>
												<tr>
													<td></td>
													<td style="width:90%">
														<label class="choice">
															<input type="checkbox" name="leave_type" checked="checked" />Sick Leave
														</label>
													</td>
												</tr>
												<tr>
													<td></td>
													<td>
														<label class="choice">
															<input type="checkbox" name="leave_type" checked="checked" />Vacation Leave
														</label>
													</td>
												</tr>
												<tr>
													<td></td>
													<td style="width:90%">
														<label class="choice">
															<input type="checkbox" name="leave_type" checked="checked" />Sick Leave w/o Pay
														</label>
													</td>
												</tr>
												<tr>
													<td></td>
													<td>
														<label class="choice">
															<input type="checkbox" name="leave_type" checked="checked" />Vacation Leave w/o Pay
														</label>
													</td>
												</tr>
												<tr>
													<td colspan="2">
														<label>Period</label>
													</td>	
												</tr>
												<tr>
													<td></td>
													<td style="width:90%">
														<label class="choice">From</label><br />
														<input type="date" />
													</td>
												</tr>
												<tr>
													<td></td>
													<td>
														<label class="choice">To</label><br />
														<input type="date" />
													</td>
												</tr>
											</tbody>
										</table>
									</div>
									<!-- End of Leave Applications -->
									
									<!-- Overtime Applications -->
									<div id="report-overtime" class="inner-width2 hidden report-hideable">
										<table class="no-style full">
											<tbody>
												<tr>
													<td colspan="2">
														<label>Period</label>
													</td>
												</tr>
												<tr>
													<td></td>
													<td style="width:90%">
														<label class="choice">From</label><br />
														<input type="date" />
													</td>
												</tr>
												<tr>
													<td></td>
													<td>
														<label class="choice">To</label><br />
														<input type="date" />
													</td>
												</tr>
											</tbody>
										</table>
									</div>
									<!-- End of Overtime Applications -->
									
									<!-- Undertime Applications -->
									<div id="report-undertime" class="inner-width2 hidden report-hideable">
										<table class="no-style full">
											<tbody>
												<tr>
													<td colspan="2">
														<label>Period</label>
													</td>
												</tr>
												<tr>
													<td></td>
													<td style="width:90%">
														<label class="choice">From</label><br />
														<input type="date" />
													</td>
												</tr>
												<tr>
													<td></td>
													<td>
														<label class="choice">To</label><br />
														<input type="date" />
													</td>
												</tr>
											</tbody>
										</table>
									</div>
									<!-- End of Undertime Applications -->
									
									<!-- Contributions -->
									<div id="report-contributions" class="inner-width2 hidden report-hideable">
										<table class="no-style full">
											<tbody>
												<tr>
													<td colspan="2">
														<label>Contribution Type</label>
													</td>
												</tr>
												<tr>
													<td></td>
													<td style="width:90%">
														<label class="choice">
															<input type="checkbox" name="contribution_type" checked="checked" />SSS
														</label>
													</td>
												</tr>
												<tr>
													<td></td>
													<td>
														<label class="choice">
															<input type="checkbox" name="contribution_type" checked="checked" />Pag-ibig
														</label>
													</td>
												</tr>
												<tr>
													<td></td>
													<td>
														<label class="choice">
															<input type="checkbox" name="contribution_type" checked="checked" />Phil Health
														</label>
													</td>
												</tr>
											</tbody>
										</table>
									</div>
									<!-- End of Contributions -->
									
									<!-- Deductions -->
									<div id="report-deductions" class="inner-width2 hidden report-hideable">
										<table class="no-style full">
											<tbody>
												<tr>
													<td colspan="2">
														<label><input type="radio" name="payroll_" checked="checked" />SSS Loan</label>
													</td>
												</tr>
												<tr>
													<td colspan="2">
														<label><input type="radio" name="payroll_" />Pag-ibig Loan</label>
													</td>
												</tr>
												<tr>
													<td colspan="2">
														<label><input type="radio" name="payroll_" />Cash Advance</label>
													</td>
												</tr>
												<tr>
													<td colspan="2">
														<label>Period</label>
													</td>
												</tr>
												<tr>
													<td></td>
													<td style="width:90%">
														<label class="choice">From</label><br />
														<input type="date" />
													</td>
												</tr>
												<tr>
													<td></td>
													<td>
														<label class="choice">To</label><br />
														<input type="date" />
													</td>
												</tr>
											</tbody>
										</table>
									</div>
									<!-- End of Deductions -->
									
									<!-- Print Payslips -->
									<div id="report-payslips" class="inner-width2 hidden report-hideable">
										<table class="no-style full">
											<tbody>
												<tr>
													<td colspan="2">
														<label>Period</label>
													</td>
												</tr>
												<tr>
													<td></td>
													<td style="width:90%">
														<label class="choice">From</label><br />
														<input type="date" />
													</td>
												</tr>
												<tr>
													<td></td>
													<td>
														<label class="choice">To</label><br />
														<input type="date" />
													</td>
												</tr>
											</tbody>
										</table>
									</div>
									<!-- End of Print Payslips -->
									
									<div class="inner-width2 first"><hr /></div>
									
									<div class="inner-width2 first">
										<a id="create-report" class="btn btn-blue">Create</a>
									</div>
							
								</section>
							</div>
						</div>
						<!-- End of Report Filter -->
						
						<!-- Report Result -->
						<div class="column width6">
							<div class="content-box corners">
								<header>
									<h3><img src="<?= $this->config->item('webroot') ?>/img/information.png" alt="" />Report</h3>		
									<span class="right-icons">
										<a href="#" title="Print">
											<img src="<?= $this->config->item('webroot') ?>/img/printer.png" />
										</a>
									</span>					
								</header>
								<section>
									
									<div class="column inner-width6 first">
										<h3><span id="report-title">Employee 201 - Payroll : Employee Rates</span></h3>
										<label><span id="report-subtitle">Basic Salary, Overtime Rates, and Holiday Rates</span></label>
									</div>
									
									<div class="column inner-width6 first"><hr /></div>
									
									<div id="entry_list" class="dataTables_wrapper">
										
										<div id="entry_list_count" class="dataTables_length">
											Show
											<select name="entry_list_count" size="1">
												<option value="10">10</option>
												<option value="25">25</option>
												<option value="50">50</option>
												<option value="100">100</option>
												<option value="all">All</option>
											</select>
											entries									
										</div>
										
										<div id="entry_list_paginate" class="dataTables_paginate paging_two_button" class="dataTables_paginate">
											<div id="entry_list_previous" class="paginate_disabled_previous" title="Previous"></div>
											<div id="entry_list_next" class="paginate_disabled_next" title="Next"></div>
										</div>
										
										<!-- Report table - Payroll -->
										<div id="report-table-payroll" class="inner-width6 first report-hidden-table">
											<table id="entry-list-table" class="display stylized full">
												<thead>
													<th class="sorting_asc">Employee Name</th>
													<th class="sorting_asc">Basic Salary</th>
													<th class="sorting_asc">Overtime Rate</th>
													<th class="sorting_asc">Holiday Rate</th>
												</thead>
												<tbody>
													<tr class="gradeA odd">
														<td>
															dela Cruz, John
														</td>
														<td>
															12,450.00
														</td>
														<td>
															65.50
														</td>
														<td>
															80.00
														</td>									
													</tr>
													<tr class="gradeA even">
														<td>
															Fernandez, Facundo
														</td>
														<td>
															12,450.00
														</td>
														<td>
															65.50
														</td>
														<td>
															80.00
														</td>
													</tr>
													<tr class="gradeA odd">
														<td>
															Hernandez, Anne
														</td>
														<td>
															12,450.00
														</td>
														<td>
															65.50
														</td>
														<td>
															80.00
														</td>
													</tr>
													<tr class="gradeA even">
														<td>
															Mula, Kriz
														</td>
														<td>
															12,450.00
														</td>
														<td>
															65.50
														</td>
														<td>
															80.00
														</td>
													</tr>
													<tr class="gradeA odd">
														<td>
															Santos, Kaye
														</td>
														<td>
															12,450.00
														</td>
														<td>
															65.50
														</td>
														<td>
															80.00
														</td>
													</tr>
												</tbody>
												<tfoot>
													<th>Employee Name</th>
													<th>Basic Salary</th>
													<th>Overtime Rate</th>
													<th>Holiday Rate</th>
												</tfoot>
											</table>
										</div>
										<!-- End of Report table - Payroll -->
										
										<!-- Report table - Leaves -->
										<div id="report-table-leaves" class="inner-width6 first report-hidden-table hidden">
											<table id="entry-list-table" class="display stylized full">
												<thead>
													<th class="sorting_asc">Employee Name</th>
													<th class="sorting_asc">Type</th>
													<th class="sorting_asc">From</th>
													<th class="sorting_asc">To</th>
													<th class="sorting_asc">Reason</th>
													<th class="sorting_asc">Status</th>
												</thead>
												<tbody>
													<tr class="gradeA odd">
														<td>
															dela Cruz, John
														</td>
														<td>
															Sick Leave
														</td>
														<td>
															December 1, 2010 (AM)
														</td>
														<td>
															December 1, 2010 (PM)
														</td>		
														<td>
															High Fever
														</td>	
														<td>
															Approved
														</td>						
													</tr>
													<tr class="gradeA even">
														<td>
															Fernandez, Facundo
														</td>
														<td>
															Vacation Leave
														</td>
														<td>
															December 20, 2010 (AM)
														</td>
														<td>
															December 23, 2010 (PM)
														</td>
														<td>
															Family vacation
														</td>	
														<td>
															Approved
														</td>	
													</tr>
													<tr class="gradeA odd">
														<td>
															Hernandez, Anne
														</td>
														<td>
															Vacation Leave
														</td>
														<td>
															December 10, 2010 (PM)
														</td>
														<td>
															December 11, 2010 (PM)
														</td>
														<td>
															Personal affairs
														</td>	
														<td>
															Approved
														</td>	
													</tr>
													<tr class="gradeA even">
														<td>
															Mula, Kriz
														</td>
														<td>
															Vacation Leave
														</td>
														<td>
															December 10, 2010 (PM)
														</td>
														<td>
															December 11, 2010 (PM)
														</td>
														<td>
															Personal affairs
														</td>	
														<td>
															Cancelled
														</td>	
													</tr>
													<tr class="gradeA odd">
														<td>
															Santos, Kaye
														</td>
														<td>
															Vacation Leave
														</td>
														<td>
															December 10, 2010 (PM)
														</td>
														<td>
															December 11, 2010 (PM)
														</td>
														<td>
															Personal affairs
														</td>	
														<td>
															Pending
														</td>	
													</tr>
												</tbody>
												<tfoot>
													<th>Employee Name</th>
													<th>Type</th>
													<th>From</th>
													<th>To</th>
													<th>Reason</th>
													<th>Status</th>
												</tfoot>
											</table>
										</div>
										<!-- End of Report table - Leaves -->
										
										<!-- Report table - Overtime -->
										<div id="report-table-overtime" class="inner-width6 first report-hidden-table hidden">
											<table id="entry-list-table" class="display stylized full">
												<thead>
													<th class="sorting_asc">Employee Name</th>
													<th class="sorting_asc">Date</th>
													<th class="sorting_asc">Total Hours</th>
													<th class="sorting_asc">Reason</th>
													<th class="sorting_asc">Status</th>
												</thead>
												<tbody>
													<tr class="gradeA odd">
														<td>
															dela Cruz, John
														</td>
														<td>
															December 1, 2010 (AM)
														</td>
														<td>
															1.5
														</td>		
														<td>
															Continue welding
														</td>
														<td>
															Approved
														</td>						
													</tr>
													<tr class="gradeA even">
														<td>
															Fernandez, Facundo
														</td>
														<td>
															December 4, 2010 (AM)
														</td>
														<td>
															1.5
														</td>		
														<td>
															Continue welding
														</td>
														<td>
															Cancelled
														</td>	
													</tr>
													<tr class="gradeA odd">
														<td>
															Hernandez, Anne
														</td>
														<td>
															December 11, 2010 (AM)
														</td>
														<td>
															1
														</td>		
														<td>
															Continue welding
														</td>
														<td>
															Approved
														</td>	
													</tr>
													<tr class="gradeA even">
														<td>
															Mula, Kriz
														</td>
														<td>
															December 19, 2010 (AM)
														</td>
														<td>
															2
														</td>		
														<td>
															Continue welding
														</td>
														<td>
															Approved
														</td>	
													</tr>
													<tr class="gradeA odd">
														<td>
															Santos, Kaye
														</td>
														<td>
															December 21, 2010 (AM)
														</td>
														<td>
															1.5
														</td>		
														<td>
															Continue welding
														</td>
														<td>
															Pending
														</td>	
													</tr>
												</tbody>
												<tfoot>
													<th>Employee Name</th>
													<th>Date</th>
													<th>Total Hours</th>
													<th>Reason</th>
													<th>Status</th>
												</tfoot>
											</table>
										</div>
										<!-- End of Report table - Overtime -->
										
										<!-- Report table - Undertime -->
										<div id="report-table-undertime" class="inner-width6 first report-hidden-table hidden">
											<table id="entry-list-table" class="display stylized full">
												<thead>
													<th class="sorting_asc">Employee Name</th>
													<th class="sorting_asc">Date</th>
													<th class="sorting_asc">Total Hours</th>
													<th class="sorting_asc">Reason</th>
													<th class="sorting_asc">Status</th>
												</thead>
												<tbody>
													<tr class="gradeA odd">
														<td>
															dela Cruz, John
														</td>
														<td>
															December 1, 2010 (AM)
														</td>
														<td>
															1.5
														</td>		
														<td>
															Emergency matters
														</td>
														<td>
															Approved
														</td>						
													</tr>
													<tr class="gradeA even">
														<td>
															Fernandez, Facundo
														</td>
														<td>
															December 4, 2010 (AM)
														</td>
														<td>
															1.5
														</td>		
														<td>
															Family affairs
														</td>
														<td>
															Cancelled
														</td>	
													</tr>
													<tr class="gradeA odd">
														<td>
															Hernandez, Anne
														</td>
														<td>
															December 11, 2010 (AM)
														</td>
														<td>
															1
														</td>		
														<td>
															Personal meeting
														</td>
														<td>
															Approved
														</td>	
													</tr>
													<tr class="gradeA even">
														<td>
															Mula, Kriz
														</td>
														<td>
															December 19, 2010 (AM)
														</td>
														<td>
															2
														</td>		
														<td>
															Personal meeting
														</td>
														<td>
															Approved
														</td>	
													</tr>
													<tr class="gradeA odd">
														<td>
															Santos, Kaye
														</td>
														<td>
															December 21, 2010 (AM)
														</td>
														<td>
															1.5
														</td>		
														<td>
															Personal meeting
														</td>
														<td>
															Pending
														</td>	
													</tr>
												</tbody>
												<tfoot>
													<th>Employee Name</th>
													<th>Date</th>
													<th>Total Hours</th>
													<th>Reason</th>
													<th>Status</th>
												</tfoot>
											</table>
										</div>
										<!-- End of Report table - Undertime -->
										
										<!-- Report table - Contributions -->
										<div id="report-table-contributions" class="inner-width6 first report-hidden-table hidden">
											<table id="entry-list-table" class="display stylized full">
												<thead>
													<th class="sorting_asc">Employee Name</th>
													<th class="sorting_asc">SSS</th>
													<th class="sorting_asc">Pag-ibig</th>
													<th class="sorting_asc">Phil Health</th>
												</thead>
												<tbody>
													<tr class="gradeA odd">
														<td>
															dela Cruz, John
														</td>
														<td>
															23,340.00
														</td>	
														<td>
															13,234.00
														</td>	
														<td>
															9,500.00
														</td>						
													</tr>
													<tr class="gradeA even">
														<td>
															Fernandez, Facundo
														</td>
														<td>
															23,340.00
														</td>		
														<td>
															13,234.00
														</td>	
														<td>
															9,500.00
														</td>	
													</tr>
													<tr class="gradeA odd">
														<td>
															Hernandez, Anne
														</td>
														<td>
															23,340.00
														</td>	
														<td>
															13,234.00
														</td>	
														<td>
															9,500.00
														</td>		
													</tr>
													<tr class="gradeA even">
														<td>
															Mula, Kriz
														</td>
														<td>
															23,340.00
														</td>	
														<td>
															13,234.00
														</td>	
														<td>
															9,500.00
														</td>		
													</tr>
													<tr class="gradeA odd">
														<td>
															Santos, Kaye
														</td>
														<td>
															23,340.00
														</td>	
														<td>
															13,234.00
														</td>	
														<td>
															9,500.00
														</td>		
													</tr>
												</tbody>
												<tfoot>
													<th>Employee Name</th>
													<th>SSS</th>
													<th>Pag-ibig</th>
													<th>Phil Health</th>
												</tfoot>
											</table>
										</div>
										<!-- End of Report table - Contributions -->
										
										<!-- Report table - Deductions -->
										<div id="report-table-deductions" class="inner-width6 first report-hidden-table hidden">
											<table id="entry-list-table" class="display stylized full">
												<thead>
													<th class="sorting_asc">Employee Name</th>
													<th class="sorting_asc">Principal Amount</th>
													<th class="sorting_asc">Date Due</th>
													<th class="sorting_asc">Balance</th>
												</thead>
												<tbody>
													<tr class="gradeA odd">
														<td>
															dela Cruz, John
														</td>
														<td>
															13,400.50
														</td>
														<td>
															June 3, 2011
														</td>
														<td>
															4,500.50
														</td>						
													</tr>
													<tr class="gradeA even">
														<td>
															Fernandez, Facundo
														</td>
														<td>
															13,400.50
														</td>
														<td>
															June 3, 2011
														</td>
														<td>
															4,500.50
														</td>	
													</tr>
													<tr class="gradeA odd">
														<td>
															Hernandez, Anne
														</td>
														<td>
															13,400.50
														</td>
														<td>
															June 3, 2011
														</td>
														<td>
															4,500.50
														</td>	
													</tr>
													<tr class="gradeA even">
														<td>
															Mula, Kriz
														</td>
														<td>
															13,400.50
														</td>
														<td>
															June 3, 2011
														</td>
														<td>
															4,500.50
														</td>	
													</tr>
													<tr class="gradeA odd">
														<td>
															Santos, Kaye
														</td>
														<td>
															13,400.50
														</td>
														<td>
															June 3, 2011
														</td>
														<td>
															4,500.50
														</td>	
													</tr>
												</tbody>
												<tfoot>
													<th>Employee Name</th>
													<th>Principal Amount</th>
													<th>Date Due</th>
													<th>Balance</th>
												</tfoot>
											</table>
										</div>
										<!-- End of Report table - Deductions -->
		
										<div id="entry_list_info" class="dataTables_info">
											Showing 1 to 5 of n entries.
										</div>
										
										<div id="entry_list_paginate" class="dataTables_paginate paging_two_button">
											<div id="entry_list_previous" class="paginate_disabled_previous" title="Previous"></div>
											<div id="entry_list_next" class="paginate_disabled_next" title="Next"></div>
										</div>
										
									</div>
									
								</section>
							</div>
						</div>
						<!-- End of Report Result -->
						
					</div>
					<!-- End of Reports Tab -->
					
				</div>
				<!-- End of Tab -->
			
			</section>
			<!-- End of Wrapper Section -->
			
			<div class="clear">&nbsp;</div>
			
		 </div>
		 <!-- End of Wrapper -->
		 
		 <!-- Popup - DTR Edit -->
		 <div id="popup-dtr_edit" class="hidden">
			<div class="column width2 first">						
				<div class="content-box corners popup-buttons">
									
					<header>
						<h3><img src="<?= $this->config->item('webroot') ?>/img/information.png" alt="" />Edit Record</h3>
					</header>
				
					<section>					
						<table>
							<tbody>
								<tr>
									<td colspan="4">
										<label>December 1, 2010</label>
									</td>
								</tr>
								<tr>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td>
									</td>
									<td class="ta-center">
										<label>In</label>
									</td>
									<td>
									</td>
									<td class="ta-center">
										<label>Out</label>
									</td>
								</tr>
								<tr>
									<td>
										<label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; AM &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
									</td>
									<td>
										<input type="text" size="4" value="08:00" class="ta-center"/>
									</td>
									<td>
										<label>-</label>
									</td>
									<td>
										<input type="text" size="4" value="12:00" class="ta-center"/>
									</td>
								</tr>
								<tr>
									<td>
										<label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; PM &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
									</td>
									<td>
										<input type="text" size="4" value="01:30" class="ta-center"/>
									</td>
									<td>
										<label>-</label>
									</td>
									<td>
										<input type="text" size="4" value="05:30" class="ta-center"/>
									</td>
								</tr>
								<tr>
									<td>
										<label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; OT &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
									</td>
									<td>
										<input type="text" size="4" value="-" class="ta-center"/>
									</td>
									<td>
										<label>-</label>
									</td>
									<td>
										<input type="text" size="4" value="-" class="ta-center"/>
									</td>
								</tr>
								<tr>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td colspan="4" class="ta-right">
										<a href="#" class="btn nyroModalClose"><span class="icon icon-disk">&nbsp;</span>Save</a>
										<a href="#" class="btn nyroModalClose"><span class="icon icon-cancel">&nbsp;</span>Cancel</a>
									</td>
								</tr>
							</tbody>
						</table>	
					</section>
				
				</div>					   
			</div>
		</div>
		 <!-- End of Popup - DTR Edit -->		
		
	</div>
	<!-- End of Page content -->
	
	<script type="text/javascript" src="<?= $this->config->item('webroot') ?>/js/hr.js"></script>